import Vue from "vue";
import Vuex from "vuex";
//模块化引入
import Cart from "./Cart"
import Product from "./Product"

//引入插件
import timeTravel from "./plugins/timeTravel";
//引入持久化存储的插件
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex);
//一个项目只能由一个 Store实例
export default new Vuex.Store({
  namespaced: true,
  //一共6个属性
  //状态
  state: {
    user:"lbw",
    num:660,
    products:[],
    msg:"明天周五了啦"
  },
  //用于变更状态
  mutations: {
    //更改vuex中状态的唯一方式就是提交mutation
    //mutation中的属性，都是由一个type和一个handle处理函数组成
    //接收state和payload(荷载)作为参数
    INCREMENT_NUM(state,payload){
      console.log(payload);
      // state.num++
      state.num += payload
      state.num = state.num + payload
    },
    DECREMENT_NUM(state,payload){
      state.num = state.num - payload
    },
    //mutation只能做同步操作,
    //原因：vue的调试工具只能检测到mutation的变更,检测不到别的
    //vuex设计者希望我们把异步操作分离，而不是将逻辑写在一起，难以维护
    SET_PRODUCT(state,payload){
      state.products = payload
    }
  },
  //数据预处理
  getters: {
    reverseMsg(state){
      state.user = "pdd"   //直接修改状态
      return state.msg.split("").reverse().join("")
    }

  },
  //用于异步操作
  actions: {
    //定义的时候页是由一个类型type对应一个处理函数
    //这个处理函数接收context和payload作为参数
    GET_PRODUCT(context,payload){
      console.log(context);
      console.log(payload);
      fetch("http://chst.vip/data/index.json")
      .then(body=>body.json())
      .then(res=>{
        console.log(res);
        context.commit("SET_PRODUCT",res.data)
      })
    }


  },
  //模块化
  modules: {
    Cart,
    Product,
  },
  //插件
  plugins: [timeTravel, createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
			storage: window.localStorage,
      // 存储的 key 的key值
			key: "2204",
			paths:['products',"user"]
  })]
});
